<template>
  <div class="order-list">
    <el-card class="box-card">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="待付款" value="pending"></el-option>
              <el-option label="待发货" value="paid"></el-option>
              <el-option label="已发货" value="shipped"></el-option>
              <el-option label="已完成" value="completed"></el-option>
              <el-option label="已取消" value="cancelled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="orderList"
        border
        style="width: 100%"
      >
        <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名" width="120"></el-table-column>
        <el-table-column prop="totalAmount" label="订单金额" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="100"></el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
            <el-button 
              size="mini" 
              type="primary"
              v-if="scope.row.status === 'paid'"
              @click="handleShip(scope.row)"
            >发货</el-button>
            <el-button 
              size="mini" 
              type="danger"
              v-if="scope.row.status === 'pending'"
              @click="handleCancel(scope.row)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="70%">
      <div class="order-detail" v-if="currentOrder">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="订单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ currentOrder.createTime }}</el-descriptions-item>
          <el-descriptions-item label="客户姓名">{{ currentOrder.customerName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentOrder.customerPhone }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusType(currentOrder.status)">
              {{ getStatusText(currentOrder.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ currentOrder.paymentMethod }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="收货信息" :column="1" border>
          <el-descriptions-item label="收货地址">
            {{ currentOrder.address }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ currentOrder.remark || '无' }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="order-items">
          <h3>商品信息</h3>
          <el-table :data="currentOrder.items" border>
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="单价" width="120">
              <template slot-scope="scope">
                ¥{{ scope.row.price.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
            <el-table-column label="小计" width="120">
              <template slot-scope="scope">
                ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <div class="order-total">
            <span>订单总额：</span>
            <span class="amount">¥{{ currentOrder.totalAmount.toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 发货对话框 -->
    <el-dialog title="订单发货" :visible.sync="shipDialogVisible" width="40%">
      <el-form :model="shipForm" :rules="shipRules" ref="shipForm" label-width="100px">
        <el-form-item label="物流公司" prop="company">
          <el-select v-model="shipForm.company" placeholder="请选择物流公司">
            <el-option label="顺丰快递" value="SF"></el-option>
            <el-option label="中通快递" value="ZTO"></el-option>
            <el-option label="圆通快递" value="YTO"></el-option>
            <el-option label="韵达快递" value="YD"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="trackingNo">
          <el-input v-model="shipForm.trackingNo" placeholder="请输入物流单号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shipDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitShip">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      // 搜索表单
      searchForm: {
        orderNo: '',
        status: '',
        dateRange: []
      },
      // 表格数据
      orderList: [
        {
          orderNo: 'DD20240101001',
          customerName: '张三',
          customerPhone: '13800138000',
          totalAmount: 2999.99,
          status: 'paid',
          paymentMethod: '微信支付',
          createTime: '2024-01-01 10:00:00',
          address: '北京市朝阳区xxx街道xxx号',
          remark: '请尽快发货',
          items: [
            {
              productName: '示例商品1',
              price: 1999.99,
              quantity: 1
            },
            {
              productName: '示例商品2',
              price: 500.00,
              quantity: 2
            }
          ]
        }
      ],
      loading: false,
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 100,

      // 详情对话框
      detailDialogVisible: false,
      currentOrder: null,

      // 发货对话框
      shipDialogVisible: false,
      shipForm: {
        company: '',
        trackingNo: ''
      },
      shipRules: {
        company: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        trackingNo: [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取状态样式
    getStatusType(status) {
      const statusMap = {
        pending: 'warning',
        paid: 'primary',
        shipped: 'success',
        completed: 'info',
        cancelled: 'danger'
      }
      return statusMap[status] || 'info'
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        pending: '待付款',
        paid: '待发货',
        shipped: '已发货',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || status
    },
    // 搜索方法
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
      // TODO: 实现搜索逻辑
    },
    resetSearch() {
      this.searchForm = {
        orderNo: '',
        status: '',
        dateRange: []
      }
    },
    // 查看详情
    handleDetail(row) {
      this.currentOrder = row
      this.detailDialogVisible = true
    },
    // 发货处理
    handleShip(row) {
      this.currentOrder = row
      this.shipForm = {
        company: '',
        trackingNo: ''
      }
      this.shipDialogVisible = true
    },
    submitShip() {
      this.$refs.shipForm.validate(valid => {
        if (valid) {
          // TODO: 实现发货逻辑
          this.$message.success('发货成功')
          this.shipDialogVisible = false
        }
      })
    },
    // 取消订单
    handleCancel(row) {
      this.$confirm('确认取消该订单?', '提示', {
        type: 'warning'
      }).then(() => {
        // TODO: 实现取消逻辑
        this.$message.success('订单已取消')
      }).catch(() => {})
    },
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val
      // TODO: 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // TODO: 重新加载数据
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  .search-bar {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  .order-detail {
    .el-descriptions {
      margin-bottom: 20px;
    }

    .order-items {
      margin-top: 20px;
      
      h3 {
        margin-bottom: 15px;
      }

      .order-total {
        margin-top: 15px;
        text-align: right;
        font-size: 16px;

        .amount {
          color: #f56c6c;
          font-weight: bold;
          margin-left: 10px;
        }
      }
    }
  }
}
</style> 